<template>
  <div class="ui-line-chart h-full">
    <div
      :id="chartId"
      ref="chart"
      v-ui-ref="vSetRef"
      class="ui-line-chart"
      :style="{
        width: '100%',
        height: 'calc(100% - 137px)',
      }"
    ></div>
    <div
      class="flex w-full"
      :style="{
        gap: '20px',
        padding: '0 5px',
      }"
    >
      <div class="utilizebox-item">
        <div class="utilizebox-item-bg"></div>
        <div class="utilizebox-item-text">
          <p class="text-title">物料总数</p>
          <p class="text-num">{{ requestData.SKUQTY }}</p>
        </div>
      </div>
      <div class="utilizebox-item">
        <div class="utilizebox-item-bg"></div>
        <div class="utilizebox-item-text">
          <p class="text-title">库位总数</p>
          <p class="text-num">{{ requestData.QTY }}</p>
        </div>
      </div>
      <div class="utilizebox-item">
        <div class="utilizebox-item-bg"></div>
        <div class="utilizebox-item-text">
          <p class="text-title">使用数量</p>
          <p class="text-num">{{ requestData.USQTY }}</p>
        </div>
      </div>
      <div class="utilizebox-item">
        <div class="utilizebox-item-bg"></div>
        <div class="utilizebox-item-text">
          <p class="text-title">空闲数量</p>
          <p class="text-num">{{ requestData.FRQTY }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  import { componentId } from '@/utils/unique'
  export default defineComponent({
    name: 'uiBydUtilize',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      full: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        inter: null,
        loopRequest: true,
        loopTime: 5000,
        requestData: {},
        chartId: 'chart',
      }
    },
    mounted() {
      this.chartId = componentId(6)
      this.$nextTick(() => {
        this.getRequestData()
        // if (this.loopRequest) {
        //   this.inter = setInterval(() => {
        //     this.getRequestData()
        //   }, this.loopTime)
        // } else {
        //   this.inter && (clearInterval(this.inter), (this.inter = null))
        // }
      })
      console.log(this.full)
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        let obj = {
          requestSet: {
            api: '/wms/wms-web',
            method: 'wms.kanban.analyze.loc.query',
            getDataKey: 'wms.kanban.analyze.loc.query',
            loopRequest: false,
            loopTime: 3000,
            nameKey: '',
            valueKey: '',
            busList: [],
            dataObj: {},
            isJson: false,
            data: [
              {
                key: '#LIMIT#',
                value: '1',
              },
              {
                key: '#PAGE_SIZE#',
                value: '50',
              },
            ],
            resList: [],
          },
        }

        this.$request(obj.requestSet, (res) => {
          this.requestData = res[0]
          this.initChart(res)
        })
      },
      clearChart() {
        echarts.init(this.$refs.chart).clear()
      },
      initChart(res) {
        const value = (res[0].USQTY / res[0].QTY).toFixed(2) * 100
        const rate = res[0].USPERCENTUM
        let chartDom = document.getElementById(this.chartId)
        console.log('chartDom', chartDom)
        let myChart = echarts.init(chartDom)
        let option = {
          title: {
            text: rate,
            left: 'center',
            top: 'center',
            itemGap: 10,
            textStyle: {
              color: '#fff',
              fontSize: '20',
              fontWeight: 600,
            },
            subtext: '利用率',
            subtextStyle: {
              color: '#fff',
              fontSize: '14',
              fontWeight: 600,
            },
          },
          angleAxis: {
            max: 100,
            // 隐藏刻度线
            show: false,
            startAngle: 90,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: {
            radius: '100%', //图形大小
          },
          series: [
            //外圈
            {
              type: 'bar',
              data: [value],
              showBackground: true,
              roundCap: true,
              backgroundStyle: {
                color: '#404C4C',
              },
              coordinateSystem: 'polar',
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#43CBFF',
                      },
                      {
                        offset: 1,
                        color: '#9708CC',
                      },
                    ],
                    global: false,
                  },
                },
              },
            },
            //内圈
            {
              type: 'pie',
              center: ['50%', '50%'],
              radius: [0, '36%'],
              borderColor: '#ffffff',
              borderWidth: 1,
              borderType: 'solid',
              opacity: 0,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: 'rgba(255,255,255,0)',
                borderColor: '#ffffff',
                borderWidth: 1,
                borderType: 'solid',
              },
              silent: true,
              data: [
                {
                  value: 100,
                  name: '',
                },
              ],
            },
          ],
        }
        option && myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .utilizebox-item {
    border-width: 0px;
    height: 102px;
    flex: 0 0 calc((100% - 40px) / 4.2);
    display: flex;
    line-height: 40px;
    position: relative;
    text-align: center;
    .utilizebox-item-bg {
      position: absolute;
      border-width: 0px;
      width: 100%;
      height: 102px;
      background: inherit;
      background-color: rgba(0, 144, 255, 0.06666666666666667);
      border: none;
      border-radius: 15px;
      border-top-left-radius: 0px;
      border-bottom-right-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      line-height: 40px;
    }
    .utilizebox-item-text {
      align-self: center;
      // padding: 0px 0px 0px 10px;
      box-sizing: border-box;
      width: 100%;
      .text-title {
        font-size: 16px;
        font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
        font-weight: 400;
        color: #fff000;
      }
      .text-num {
        font-size: 23px;
        font-family: 'Impact', sans-serif;
        font-weight: 900;
        color: #ffffff;
      }
    }
  }
</style>
